<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
var salvProName = ["北京", "上海", "浙江", "广东", "江苏", "重庆", "天津"];
var salvProValue = [239, 181, 154, 144, 135, 117, 74];
var salvProMax: any = [];//背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(salvProValue[0])
}

onMounted(() => {
    var myChart = echarts.init(document.getElementById('flow'));

    // 指定图表的配置项和数据
    var option = {
        grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top: '2%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function (params: any) {
                return params[0].name + ' : ' + params[0].value
            }
        },
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            max: '20',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: salvProName
        }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
                textStyle: {
                    color: '#ffffff',
                    fontSize: '12'
                },
            },
            data: salvProValue
        }],
        series: [{
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                },
            },
            barWidth: 20,
            data: salvProValue
        },
        {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
                normal: {
                    color: 'rgba(24,31,68,1)',
                    barBorderRadius: 30,
                }
            },
        },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})

</script>

<template>
    <div class="right-Top">
        <div class="right-Top-img">
            <span style="padding-left: 20px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">毕业生流向城市</span>
        </div>
        <div class="right-Top-bottom">
            <div class="right-Top-bottom-header">
                <div>
                    <div>
                        <img src="../../assets/icon2/形状@3x.png" alt=""
                            style="width: 60%; height: 60%;margin-top: 2%;" />
                    </div>
                    <div>
                        设计
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../../assets/icon2/开发.png" alt="" style="width: 60%; height: 60%;margin-top: 2%;" />
                    </div>
                    <div>
                        开发
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../../assets/icon2/元宇宙@2x.png" alt=""
                            style="width: 60%; height: 60%;margin-top: 2%;" />
                    </div>
                    <div>
                        元宇宙
                    </div>
                </div>
            </div>
            <div class="right-Top-bottom-foot">
                <div id="flow" style="width: 100%;height:100%;"></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-Top {
    width: 28rem;
    height: 25rem;
    margin: 6rem 2rem 4rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/RightRight.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 20rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

        &-header {
            width: 100%;
            height: 5rem;

            >div {
                float: left;
                width: 30%;
                height: 80%;
                margin: 0.4rem;
                display: flex;
                background: linear-gradient(180deg, rgba(32, 58, 255, 1) 0%, rgba(173, 0, 255, 1) 100%);

                >div {
                    flex: 1;
                    text-align: center;
                    line-height: 3rem;
                    color: white;
                    font-size: 22px;
                    font-weight: bolder;
                }
            }
        }

        &-foot {
            width: 100%;
            height: 15rem;
        }
    }
}

.right-Bottom-bottom-header-left {
    width: 30%;
    height: 100%;
    float: left;
    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
}

.right-Bottom-bottom-header-right {
    width: 70%;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 5rem;
    color: white;
    font-size: 18px;
}

.right-Bottom-bottom-header-left-right {
    width: 30%;
    height: 100%;
    background: skyblue;
    float: left;
    background: url('../../assets/icon/智能检测/shui.png') no-repeat center center;
}
</style>